<template>
  <!-- 主体区域 -->
  <section id="app">
    <TodoHeader :list="list" @namehander="namehander"></TodoHeader>
    <TodoMain :list="list" @idhander="idhander"></TodoMain>
    <ToduFooter :list="list" @clean="cleanhander"></ToduFooter>
  </section>
</template>

<script>
import TodoHeader from "./components/TodoHeader.vue";
import TodoMain from "./components/TodoMain.vue";
import ToduFooter from "./components/ToduFooter.vue";

export default {
  // 渲染功能
  // 提供数据 → 提供再公共的父组件 App.vue
  // 通过父传子，将数据传递给 TodoMain
  // 利用v-for 渲染
  data() {
    return {
      list: JSON.parse(localStorage.getItem("list")) || [
        { id: 1, name: "打篮球" },
        { id: 2, name: "看电影" },
        { id: 3, name: "逛街" },
      ],
    };
  },
  components: {
    TodoHeader,
    TodoMain,
    ToduFooter,
  },
  methods: {
    namehander(value) {
      this.list.push({ id: +new Date(), name: value });
      // console.log(this.list);
    },
    idhander(id) {
      console.log(id);
      this.list = this.list.filter((item) => item.id !== id);
    },
    cleanhander(value) {
      console.log(value);
      if (value === 1) {
        this.list = [];
      }
    },
  },
  watch: {
    list: {
      deep: true,
      handler(newvalue) {
        localStorage.setItem("list", JSON.stringify(newvalue));
      },
    },
  },
};
</script>

<style></style>
